<template>
  <div class="login">
    <div class="card">
      <!-- :model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象 -->
      <!-- :rules="rules" 是动态绑定的rules，表单验证规则 -->
      <!-- ref="ruleForm"  是我们绑定的对象 -->
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        :label-position="labelPosition"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm myfrom"
      >
        <h4>修改公司信息</h4>
         <el-form-item class="my-el-form-item" label="用户名" prop="username"> 
          <!-- clearable 显示后面x的图标（清空功能） -->
           <!-- v-model="ruleForm.username"这个是和·  ref="ruleForm"这个是一起的吗  -->
           <!-- prop="password" 和 :rules="rules"这个是一起的 -->
       </el-form-item>
          <el-input
            class="in"
            type="text"
            clearable
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
       
         <el-form-item class="my-el-form-item" label="公司名称" prop="compareName"> 
          <el-input
           class="input"
            type="text"
             clearable
            v-model="ruleForm.compareName"
            autocomplete="off"
          ></el-input>
        </el-form-item>

          <el-form-item class="my-el-form-item" label="公司地址" prop="address"> 
          <el-input
           class="input"
            type="text"
             clearable
            v-model="ruleForm.address"
            autocomplete="off"
          ></el-input>
        </el-form-item>

          <el-form-item class="my-el-form-item" label="公司法人" prop="companyPeople"> 
          <el-input
           class="input"
            type="text"
             clearable
            v-model="ruleForm.companyPeople"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        
         <el-form-item class="my-el-form-item" label="公司电话号码" prop="telephone"> 
          <el-input
           class="input"
            type="text"
             clearable
            v-model="ruleForm.telephone"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item >
        </el-form-item>
         <el-form-item class="my-el-form-item" label="服务类型">
          <!--加入多选框 -->
          <el-checkbox-group v-model="ruleForm.type">
            <el-checkbox label="品类保洁" name="type"></el-checkbox>
            <el-checkbox label="日常保洁" name="type"></el-checkbox>
            <el-checkbox label="保姆" name="type"></el-checkbox>
            <el-checkbox label="育儿嫂" name="type"></el-checkbox>
            <el-checkbox label="月嫂" name="type"></el-checkbox>
          </el-checkbox-group>
         
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" class="btn btn-outline-primary"
            style="margin-right:5px;">保存</el-button>
          <router-link
            to="/home"
            class="btn btn-outline-primary"
            style="margin-right:5px;"
            tag="button"
          >回到首页</router-link>
          <!-- <router-link to="/register" tag="button" class="btn btn-outline-primary">没有账号？请注册</router-link> -->
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
     
      ruleForm: {
        username: '',
        compareName:'',
        // password: '',
        address:'',
        companyPeople:'',
        telephone:'',
        code: '',
        token: '',
        type: [],
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
         compareName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
          address: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
         companyPeople: [
          { required: true, message: '请输入公司地址', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        telephone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 11个字符',
            trigger: 'blur',
          },
        ],
     
      },

    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post(
            '/login?username='+this.ruleForm.username+'&password='+this.ruleForm.password+'&token='+this.ruleForm.token+'&code='+this.ruleForm.code

          )

          if (data.code != 200) {
            this.$refs[formName].resetFields()
            this.$message.error(data.msg)
          } else {
            this.$message.success('登录成功！')

            this.$refs[formName].resetFields()

            // this.$store.commit('users', data.data) //状态持久化
            this.$router.push('/home')
          }
        }
      })
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    
  },
 
}
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
 
  //center center no-repeat
  background: url("~@/assets/imags/login/company.jpeg") no-repeat ; 
  background-size: cover;
}
.card {
  //width: 25rem;
   width: 100%;
    height: 100%;
  background: rgba(255, 255, 255, 0.35);
}

.el-form {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}

.el-message {
  top: 200px !important;
}


h1 {
  letter-spacing: 9px;

  margin-top: 10px;
  color: #0a1b4f;
}
.btn-outline-primary {
  color: black !important;
}
.el-input--suffix {
  width: 100% !important;
}
.el-form-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  
}
.in{
  width: 600%;
}
.el-form-item__content {
  display: flex !important;
}


</style>
